<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提速练习</title>
    <script src="ROOT_PATH/static/js/jquery-3.5.1.min.js"></script>
    <script src="ROOT_PATH/static/js/vue.min.js"></script>
    <style>
        .container{
            width:100%;
            display: flex;
            padding:20px;
            box-sizing: border-box;
        }
        .container .left{
            width:30%;
            height: 100%;
            border:1px solid #ccc;
            box-sizing: border-box;
            border-bottom: 0;
        }
        .container .left ul{
            padding: 0;
            margin: 0;
        }
        .container .left ul li{
            list-style: none;
            line-height: 28px;
            border-bottom: 1px solid #ccc;
            padding-left:10px;
            cursor: pointer;
            position: relative;
        }
        .container .left ul li .res{
            position: absolute;
            right:10px;
            top:0;
            font-size: 18px;
            display: none;
        }
        .container .left ul li .res.error{
            color:red;
        }
        .container .left ul li.on{
            background: green;
            color:#fff;
        }
        .container .right{
            width: 70%;
        }
        .container .right .scan-info{
            margin:100px auto;
            width: 60%;
            height:300px;
            border: 1px solid #ccc;
        }
        .container .right .scan-info .info-item{
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 24px;
        }
        .container .right .scan-info .info-item.on{
            display: block;
        }
        .container .right .input-line{
            margin-top: 250px;
            text-align: right;
        }
        .container .right .input-line input{
            width: 200px;
            line-height: 30px;
            height: 30px;
            font-size: 20px;
            border:1px solid #ccc;
        }
        .container .right .input-line button.check{
            margin-right: 10px;
        }
        .container .right .input-line span.tips{
            text-align: left;
            padding-left: 8px;
            display: inline-block;
            color:red;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <ul>
                {foreach $left_list as $key=>$info}
                <li class="{$key == 0 ? 'on' : ''}" data-index="{$key}" data-id="{$info.id}">
                    {$info.name}
                    <span class="res error">X</span>
                </li>
                {/foreach}
            </ul>
        </div>
        <div class="right">
            <div class="scan-info">
                <div class="info-list">
                    {foreach $right_list as $key=>$info}
                    <div class="info-item {$key == 0 ? 'on' : ''}" data-index="{$key}" data-id="{$info.id}">{$info.name}</div>
                    {/foreach}
                </div>
            </div>
            <div class="input-line">
                <button class="check" id="hide_res">隐藏结果</button> <button class="check" id="check">检查结果</button> <input type="text" class="id-code" id="id_code"/><span class="tips"></span>
            </div>

        </div>
    </div>
</body>
</html>

<script>
    $(".container .left ul li").on('click', function(){
        if(!$(this).hasClass('on')){
            $(this).addClass('on').siblings().removeClass('on');
            let index = $(this).data('index');
            $(".container .right .info-list .info-item[data-index='"+ index +"']").addClass('on').siblings().removeClass('on');
            $("#id_code").val('');
        }
    })

    $("#id_code").on('change', function(){
        let right_dom = $(".container .right .info-list .info-item.on");
        let value = $(this).val();
        let id = right_dom.data('id');
        let name = right_dom.html();
        let index = right_dom.data('index');
        if(value == id){
            $(".container .left ul li[data-index='"+ index +"']").html(name).data('id', id);
        }
        if(value && value != id){
            $(this).next().html('输入错误');
        }else{
            $(this).next().html('');
        }
    })

    $("#hide_res").on('click', function(){
        $(".container .left ul li span.res").hide();
    })

    $("#check").on('click', function(){
        $(".container .left ul li").each(function(){
            let index = $(this).data('index');
            let id = $(this).data('id');
            let right_id = $(".container .right .info-list .info-item[data-index='"+ index +"']").data('id');
            if(id == right_id){
                $(this).find('span.res').hide();
            }else{
                $(this).find('span.res').show();
            }
        })
    })

    var keys = {
        87 : 'W',
        69 : 'E',
        13 : 'ENTER',
    }
    $(document).keydown(function (event) {
        let keyCode = event.keyCode;
        let key = keys[keyCode] || '';
        if (key == 'ENTER') {
            $("#id_code").blur();
        }
        if (key == 'E') {
            $("#id_code").blur();
            let dom = $(".container .left ul li.on").next();
            if(dom.length == 0){
                dom = $(".container .left ul li[data-index='0']");
            }
            dom.click();
        }
    });
    $(document).keyup(function (event) {
        let keyCode = event.keyCode;
        let key = keys[keyCode] || '';
        if(key == 'W'){
            if(!$("#id_code").is(':focus')){
                $("#id_code").focus();
            }
        }
    });

</script>